<template>
  <div style="background-color: #bbb; height: 100vh">
    <div
      style="
        width: 100vw;
        height: 41vh;
        background: #fff;
        border-radius: 0px 0px 15px 15px;
      "
    >
      <div
        style="height: 8vh; width: 100vw; text-align: right; line-height: 12vh"
      >
        <span style="margin-right: 5vw"
          ><img :src="require('@/assets/img/tubiao/shezhi.png')" alt=""
        /></span>
        <span style="margin-right: 5vw"
          ><img :src="require('@/assets/img/tubiao/xiaoxi.png')" alt=""
        /></span>
      </div>
      <div style="display: flex; height: 11vh; line-height: 10vh">
        <div style="margin-left: 10vw">
          <van-image
            round
            width="4rem"
            height="4rem"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
        </div>
        <div style="margin-left: 5vw"><b>王雷_by57UJ</b></div>
      </div>
      <div>
        <van-grid square :border="false">
          <van-grid-item v-for="value in data.shuju" :key="value">
            <div style="height: 5vh; font-size: 20px">
              <b>{{ value.num }}</b>
            </div>
            <div style="color: #bbb; font-size: 10px">{{ value.name }}</div>
          </van-grid-item>
        </van-grid>
      </div>
      <div>
        <van-cell-group inset>
          <van-cell
            style="background-color: black; color: antiquewhite"
            icon="location-o"
            title="V0注册会员"
            is-link
            title-style="text-align:left;"
            value-class="color"
            value="1292积分待领取"
          />
        </van-cell-group>
      </div>
    </div>
    <div
      style="
        width: 100vw;
        height: 35vh;
        background: #fff;
        border-radius: 15px;
        margin-top: 1vh;
      "
    >
      <div>
        <van-cell
          title="我的订单"
          is-link
          title-style="font-size:14px;text-align:left;font-weight:bold;"
          style="border-radius: 15px"
        />
      </div>
      <div>
        <van-grid square :column-num="5" :border="false">
          <van-grid-item
            v-for="value in data.order"
            :key="value"
            :icon="value.icon"
            :text="value.name"
            style="font-size: 15px"
          />
        </van-grid>
      </div>
      <div>
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="image in data.images" :key="image">
            <van-image
              :src="image"
              radius="20px"
              style="height: 15vh; width: 95vw"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div style="margin-top: 1vh">
      <van-cell
        title-style="margin-left:3vw;height:4vh;line-height:4vh;text-align:left;font-size:16px;color:#333;"
        :title="item.title"
        is-link
        :value="item.xq"
        :icon="item.icon"
        v-for="item in data.xiangqing"
      />
    </div>
    <div style="height: 55px"></div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
const data = reactive({
  shuju: [
    {
      id: 1,
      num: 0,
      name: "商品收藏",
    },
    {
      id: 2,
      num: 0,
      name: "商家收藏",
    },
    {
      id: 3,
      num: 0,
      name: "浏览记录",
    },
    {
      id: 1,
      num: 10,
      name: "代金券",
    },
  ],
  order: [
    {
      id: 1,
      icon: "paid",
      name: "待付款",
    },
    {
      id: 2,
      icon: "gift-o",
      name: "确认中",
    },
    {
      id: 3,
      icon: "logistics",
      name: "待收货",
    },
    {
      id: 4,
      icon: "records",
      name: "待评价",
    },
    {
      id: 5,
      icon: "close",
      name: "已取消",
    },
  ],
  images: [
    "https://t7.baidu.com/it/u=3006554535,1590294547&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=2462227045,3855965534&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=4066387394,2691309199&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=179992138,1273074796&fm=193&f=GIF",
    "https://t7.baidu.com/it/u=2482536312,3790393383&fm=193&f=GIF",
  ],
  xiangqing: [
    {
      id: 1,
      title: "扫码加群",
      xq: "入群即得￥50券",
      icon: "scan",
    },
    {
      id: 2,
      title: "送好友￥688",
      xq: "免费赚￥150",
      icon: "point-gift-o",
    },
    {
      id: 3,
      title: "问卷有奖",
      xq: "填问卷得100积分",
      icon: "description",
    },
    {
      id: 4,
      title: "海外自由购",
      xq: "海外官网商品随心购买",
      icon: "guide-o",
    },
    {
      id: 5,
      title: "晒单有奖",
      xq: "领无门槛3美金",
      icon: "after-sale",
    },
  ],
});
</script>
<style lang="scss" scoped>
::v-deep(.van-cell__value) {
  color: #fdd6a4;
}
::v-deep(.van-grid-item__text) {
  color: #333;
  font-size: 13px;
}
::v-deep(.van-cell__left-icon) {
  font-size: 22px;
}
</style>
